* {
	margin: 0;
	padding: 0;
}

body {
	font: 62.5% "Lucida Grande", Lucida, Verdana, sans-serif;
	text-align: center;
}
#content {
	width :400px;
	margin: 0 auto;
	text-align: left;
}

h1 {
	padding: 0.25em;
	margin: 0;
	margin-bottom: 1em;
	background: gray;
	color: white;
	text-align: left;
}

h2 {
	margin:  1em 0;
}
h3 {
	margin:  1em 0;
}

p {
	padding: 1em 0;
}
code {
	font: 1em "Courier New", Courier, mono;
}


.progressContainer {
	display: block;
	border: 1px solid #666;
	background-color: #eee;
	width: 300px;
	margin: 1em;
	padding: 0.25em;
}

.progressBackground {
	display: block;
	border: 1px dotted gray;
	background-color: #fbffee;
}

.progressBar {
	display: block;
	background-color: gold;
	color: white;
	font-weight:bold;
	width: 100%;
}
.progressBar span {
	padding: 0.25em;
	display: block;
}


#good .progressBackground {
		padding: 2em;
}
#good .progressBar {
		margin: 0em;
}
#bad .progressBackground {
		padding: 0em;
}
#bad .progressBar {
		margin: 2em;
}

#designer .progressContainer {
		background-color: purple;
		border: 2px solid black;
		padding: 1em;
}
#designer .progressBackground {
		margin: 0.25em;
		border: 1px solid orange;
		padding: 0.5em;
		background-color: teal;
}
#designer .progressMessage {
	color: white;
}


